<!--
  头部公共组件    zls-2021/4/1
      Attributes
          1、text               内容（默认为'',必填）
          2、color              内容的字体色（默认为'#333'）
          3、fontSize           内容的大小（默认为16）
          4、fontWeight         内容的粗细（默认为400）
          5、bgColor            头部的背景色（默认为'#fff'）
          6、leftSvg            左侧第一个图标（默认为返回图标）
          7、leftSvgTwo         左侧第二个图标（默认为''）
          8、rightSvg           右侧图标（默认为''）
          9、rightText          右侧文本内容（默认为''）
          10、rightColor        右侧文本内容的字体色（默认为'lightseagreen'）
          11、rightFontSize     右侧文本内容的大小（默认为12）
          12、rightFontWeight   右侧文本内容的粗细（默认为400）
          13、back              点击左侧返回图标是否是返回上一级（默认是true）；如果为false，则需要开发人员自己调用leftBtn函数去跳转页面
      Events
          1、leftBtn           左侧第一个图标函数
          2、leftBtnTwo        左侧第二个图标函数
          3、rightSvg          右侧图标函数
          4、rightText         右侧文本函数
      Slot
          开发人员可以在右侧添加自定义的文字或者图标

      Demo==>
          <z-head :text="'头部内容太长，藏起来吧'"></z-head>
-->
<template>
  <div class="z-head" :style="[headStyle]">
    <div class="z-head-left">
      <z-svg v-if="leftSvg" :name="leftSvg" @click="leftBtn"></z-svg>
      <z-svg v-if="leftSvgTwo" :name="leftSvgTwo" @click="leftBtnTwo"></z-svg>
    </div>
    <span :style="[textStyle]">{{ text }}</span>
    <div class="z-head-right">
      <z-svg v-if="rightSvg" :name="rightSvg" @click="rightSvgBtn"></z-svg>
      <span v-if="rightText" :style="[rightTextStyle]" @click="rightTextBtn">{{ rightText }}</span>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default { name: 'z-head' }
</script>
<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { pxToRem } from '@/utils/index'
const emit = defineEmits(['leftBtn', 'leftBtnTwo', 'rightSvgBtn', 'rightTextBtn'])
const router = useRouter()
const props = defineProps({
  // 内容
  text: {
    type: String,
    default: ''
  },
  color: {
    type: String,
    default: '#333'
  },
  fontSize: {
    type: Number,
    default: 16
  },
  fontWeight: {
    type: [String, Number],
    default: 400
  },
  bgColor: {
    type: String,
    default: '#f5f5f5'
  },
  leftSvg: {
    type: String,
    default: 'jiantou3'
  },
  leftSvgTwo: {
    type: String,
    default: ''
  },
  rightSvg: {
    type: String,
    default: ''
  },
  rightText: {
    type: String,
    default: ''
  },
  rightColor: {
    type: String,
    default: 'lightseagreen'
  },
  rightFontSize: {
    type: Number,
    default: 12
  },
  rightFontWeight: {
    type: [String, Number],
    default: 400
  },
  back: {
    type: Boolean,
    default: true
  }
})

// 头部样式
const headStyle = computed(() => {
  return {
    backgroundColor: props.bgColor
  }
})

// 中间的文本内容样式
const textStyle = computed(() => {
  return { color: props.color, fontSize: pxToRem(props.fontSize), fontWeight: props.fontWeight }
})

// 右侧文本内容样式
const rightTextStyle = computed(() => {
  return { color: props.rightColor, fontSize: pxToRem(props.rightFontSize), fontWeight: props.rightFontWeight }
})

function leftBtn() {
  props.back ? router.go(-1) : emit('leftBtn')
}
function leftBtnTwo() {
  emit('leftBtnTwo')
}
function rightSvgBtn() {
  emit('rightSvgBtn')
}
function rightTextBtn() {
  emit('rightTextBtn')
}
</script>

<style scoped lang="scss">
.z-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 50px;
  padding: 0 90px;
  color: #333;
  position: relative;
  border-bottom: 1px solid $border;
  &-left {
    position: absolute;
    left: 15px;
    display: flex;
    align-items: center;
    > svg {
      font-size: 16px;
    }
    > svg:nth-of-type(1) {
      margin-right: 10px;
    }
  }
  > span {
    flex: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  &-right {
    position: absolute;
    right: 15px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    > span {
      margin-left: 10px;
    }
    > svg {
      font-size: 24px;
      margin-left: 10px;
    }
  }
}
</style>
